<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>vue2生命周期</h2>
      <p v-for="item in 100">{{count}}</p>
    </div>

    <script src="./lib/vue2.js"></script>
    <script>
      // vue2的卸载的生命周期的名字和vue3不一样
      // vue2是beforeDestroy和destroyed

      let timer;
      // 建议把html里面没有用到的变量，定义成全局的普通变量

      new Vue({
        data() {
          return {
            count: 1,
            // timer: null,
          };
        },
        mounted() {
          window.addEventListener("scroll", () => {
            console.log(11);
          });

          timer = setInterval(() => {
            console.log("count++");
            this.count++;
          }, 1000);

          setTimeout(() => {
            // 用于主动销毁实例
            this.$destroy();
          }, 4000);
        },
        beforeDestroy() {
          // 需要在实例被销毁的时候去手动销毁定时器
          // 还有WebSocket(长连接), 原生js的事件监听, 销毁第三方的实例(地图或者图表等)
          console.log("beforeDestroy");
          clearInterval(timer);
        },
        destroyed() {
          console.log("destroyed");
        },
      }).$mount("#app");
    </script>
  </body>
</html>
